<template>
  <view class="management-detail">
    <view class="wrap">
      <view class="t">商品详情</view>
      <view class="flex mt28">
        <image src="/static/demo.jpg" mode="aspectFit" class="thumb"></image>
        <view class="flex1">
          <view class="ellipsis-2 t">1111111</view>
          <view class="p">
            <text>￥</text>
            99.00
          </view>
        </view>
      </view>
      <view class="flex-between mt34" v-if="type == 1">
        <view class="f28">发布老师</view>
        <view class="t-box flex">
          <image src="/static/demo.jpg" mode="aspectFit"></image>
          <view class="">带用吗</view>
          <view class="">美术老师</view>
        </view>
      </view>
    </view>
    <view class="wrap">
      <view class="t">价格明细</view>
      <view class="flex-between mtb">
        <view class="flex">
          <view class="t1">商品总价</view>
          <view class="t2">共1件商品</view>
        </view>
        <view class="t3">￥390.00</view>
      </view>
      <view class="pb36 flex-between">
        <view class="flex">
          <view class="t1">积分抵扣</view>
          <view class="t2">抵扣200积分</view>
        </view>
        <view class="t3">-￥390.00</view>
      </view>
      <view class="flex-between">
        <view class="t5">合计应付</view>
        <view class="p1">￥3.33</view>
      </view>
    </view>
    <view class="wrap">
      <view class="t">订单信息</view>
      <view class="flex-between mt20">
        <view class="t1">订单编号：</view>
        <view class="t5">111</view>
      </view>
      <view class="flex-between mtb2">
        <view class="t1">下单时间：</view>
        <view class="t5">1111</view>
      </view>
      <view class="flex-between">
        <view class="t1">下单人</view>
        <view class="t5">2222</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 0,
    };
  },
  onLoad(options) {
    this.type = options?.type || 0;
  },
};
</script>

<style lang="scss" scoped>
.management-detail {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  box-sizing: border-box;
  padding: 24upx 32upx;
  .wrap {
    padding: 34upx 24upx 40upx;
    margin-bottom: 24upx;
    background: #fff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    .t {
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
      margin-bottom: 48upx;
    }
    .t1 {
      font-weight: bold;
      font-size: 24rpx;
      color: #222222;
      margin-right: 28upx;
    }
    .t2 {
      font-size: 24rpx;
      color: #666666;
    }
    .pb36 {
      padding-bottom: 36upx;
      margin-bottom: 30upx;
      border-bottom: 2rpx solid #f3f4f8;
    }
    .mtb {
      margin: 16upx 0 22upx;
    }
    .t3 {
      font-weight: bold;
      font-size: 24rpx;
      color: #666666;
    }
    .t5 {
      font-size: 24rpx;
      color: #222222;
    }
    .mt28 {
      margin-top: 28upx;
    }
    .thumb {
      width: 168upx;
      height: 168upx;
      margin-right: 24upx;
    }

    .p {
      font-weight: bold;
      font-size: 32rpx;
      color: #e23410;
      & > text {
        font-weight: 400;
        font-size: 20rpx;
      }
    }
  }
  .p1 {
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }
  .mt20 {
    margin-top: 20upx;
  }
  .mtb2 {
    margin: 14upx 0 18upx;
  }
  .mt34 {
    margin-top: 34upx;
  }
  .f28 {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }
  .t-box {
    & > image {
      width: 40rpx;
      height: 40rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
    & > view:nth-of-type(1) {
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
      margin: 0 16upx;
    }
    & > view:nth-of-type(2) {
      width: 112rpx;
      height: 32rpx;
      background: #f49c0d;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      text-align: center;
      line-height: 32upx;
      font-size: 20rpx;
      color: #ffffff;
    }
  }
}
</style>
